<template>
  <div class="pc-block-infos table-shadow">
    <div class="base-title">{{$t('blockDetail.general')}}</div>
    <div class="info">
      <div class="left">
        <div class="item flex-left">
          <img src="../../../assets/img/tip/red.png">
          <label>{{$t('block.txCount')}}</label>
          <span>{{infos.txCount}}</span>
        </div>
        <!-- <div class="item flex-left">
          <img src="../../../assets/img/tip/blue.png" />
          <label>区块收益</label>
          <span>{{infos.height|branchIncome}}</span>
        </div>-->
        <div class="item flex-left">
          <img src="../../../assets/img/tip/pink.png">
          <label>{{$t('blockDetail.last')}}</label>
          <span
            class="light block-jump"
            @click="jump(infos.height-1)"
          >{{infos.height - 1>=0? infos.height - 1:$t('blockDetail.nodata')}}</span>
        </div>
        <div class="item flex-left">
          <img src="../../../assets/img/tip/green.png">
          <label>{{$t('blockDetail.mock')}}</label>
          <span>{{infos.txHash|filterHash(25)}}</span>
          <div
            class="copy-btn"
            v-clipboard:copy="infos.txHash"
            v-clipboard:success="success"
            v-clipboard:error="error"
          >{{$t('components.copy')}}</div>
        </div>
      </div>
      <div class="right">
        <!-- <div class="item flex-left">
          <img src="../../../assets/img/tip/red.png" />
          <label>高度</label>
          <span>{{infos.height}}</span>
        </div>-->
        <div class="item flex-left">
          <img src="../../../assets/img/tip/blue.png">
          <label>{{$t('trade.time')}}（UTC + 8）</label>
          <span>{{infos.blockTime|caculateTime}}</span>
        </div>
        <div class="item flex-left">
          <img src="../../../assets/img/tip/pink.png">
          <label>{{$t('blockDetail.next')}}</label>
          <span
            class="light block-jump"
            @click="jump(infos.height+1)"
          >{{$store.state.maxHeight >= infos.height + 1? infos.height +1 :$t('blockDetail.nodata')}}</span>
        </div>
        <div class="item flex-left">
          <img src="../../../assets/img/tip/green.png">
          <label>{{$t('blockDetail.statusHash')}}</label>
          <span>{{infos.stateHash|filterHash(25)}}</span>
          <div
            class="copy-btn"
            v-clipboard:copy="infos.stateHash"
            v-clipboard:success="success"
            v-clipboard:error="error"
          >{{$t('components.copy')}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    infos: {
      type: Object,
      default: () => {
        return {
          txCount: 0,
          height: 0,
          txHash: "",
          blockTime: "",
          stateHash: ""
        };
      }
    }
  },
  methods: {
    jump(height) {
      console.log(height, this.$store.state.maxHeight);
      if (height < 0 || height > this.$store.state.maxHeight) return;
      else
        this.$router.push({
          path: "/blockdetail",
          query: { height: height }
        });
    },
    success() {
      this.$message.success(this.$t("components.copySuc"));
    },
    error() {
      this.$message.warning(this.$t("components.copyErr"));
    }
  }
};
</script>

<style lang="scss" scoped>
.pc-block-infos {
  width: 100%;
  background: $white;
  border-radius: 5px;
  border: 1px solid rgba(235, 239, 241, 1);
  .base-title {
    height: 69px;
    line-height: 69px;
    padding-left: 30px;
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    font-weight: 500;
    color: $black;
    border-bottom: 1px solid #eee;
  }
  .info {
    font-size: 14px;
    color: $black;
    .left,
    .right {
      display: inline-block;
      width: 50%;
      padding: 20px 30px;
      .item {
        height: 55px;
        label {
          width: 130px;
          margin-left: 10px;
        }
      }
    }
    .left {
      border-right: 1px solid #ececec;
    }
    .block-jump {
      cursor: pointer;
    }
  }
}
</style>

